<template>
  <view class="error-handler" v-if="error">
    <view class="error-content elderly-pressable" @tap="handleRetry">
      <view class="error-icon">
        <text class="icon-emoji">⚠️</text>
      </view>
      <view class="error-info">
        <text class="error-title elderly-text-large">{{errorTitle}}</text>
        <text class="error-message elderly-text">{{errorMessage}}</text>
        <text class="error-suggestion elderly-text">{{errorSuggestion}}</text>
      </view>
      <view class="error-actions">
        <button class="retry-btn elderly-pressable" @tap="handleRetry">
          <text class="btn-text elderly-text">重试</text>
        </button>
        <button class="help-btn elderly-pressable" @tap="handleHelp">
          <text class="btn-text elderly-text">帮助</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ErrorHandler',
  props: {
    error: {
      type: Object,
      default: null
    },
    showRetry: {
      type: Boolean,
      default: true
    },
    showHelp: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    errorTitle() {
      if (!this.error) return '出现错误'
      
      const errorTypes = {
        network: '网络连接错误',
        timeout: '请求超时',
        server: '服务器错误',
        permission: '权限不足',
        notFound: '内容未找到',
        unknown: '未知错误'
      }
      
      return errorTypes[this.error.type] || '出现错误'
    },
    
    errorMessage() {
      if (!this.error) return ''
      return this.error.message || '操作失败，请稍后重试'
    },
    
    errorSuggestion() {
      if (!this.error) return ''
      
      const suggestions = {
        network: '请检查网络连接，或稍后重试',
        timeout: '网络较慢，请稍后重试',
        server: '服务器暂时不可用，请稍后重试',
        permission: '请检查应用权限设置',
        notFound: '请求的内容不存在',
        unknown: '如问题持续存在，请联系客服'
      }
      
      return suggestions[this.error.type] || '请稍后重试'
    }
  },
  methods: {
    handleRetry() {
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
      }
      
      this.$emit('retry')
    },
    
    handleHelp() {
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'light' }) } catch(e){}
      }
      
      this.$emit('help')
      
      // 显示帮助信息
      uni.showModal({
        title: '帮助信息',
        content: this.getHelpContent(),
        showCancel: false,
        confirmText: '知道了'
      })
    },
    
    getHelpContent() {
      const helpContents = {
        network: '网络问题解决方案：\n1. 检查WiFi或移动网络连接\n2. 尝试切换网络\n3. 重启应用\n4. 联系网络运营商',
        timeout: '超时问题解决方案：\n1. 检查网络速度\n2. 避免在网络繁忙时使用\n3. 尝试重新操作\n4. 联系技术支持',
        server: '服务器问题解决方案：\n1. 稍后重试\n2. 检查应用更新\n3. 联系客服\n4. 查看官方公告',
        permission: '权限问题解决方案：\n1. 检查应用权限设置\n2. 允许必要权限\n3. 重新安装应用\n4. 联系技术支持',
        notFound: '内容不存在解决方案：\n1. 检查输入内容\n2. 尝试其他操作\n3. 联系客服\n4. 查看帮助文档',
        unknown: '未知错误解决方案：\n1. 重启应用\n2. 清除缓存\n3. 更新应用\n4. 联系客服'
      }
      
      return helpContents[this.error?.type] || '请联系客服获取帮助'
    }
  }
}
</script>

<style scoped>
.error-handler {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: $elderly-spacing-lg;
}

.error-content {
  width: 100%;
  max-width: 600rpx;
  background: $elderly-bg-primary;
  border-radius: $elderly-radius-lg;
  padding: $elderly-spacing-xl;
  box-shadow: $elderly-shadow-lg;
  border: 2rpx solid $elderly-border;
  text-align: center;
}

.error-icon {
  margin-bottom: $elderly-spacing-lg;
}

.icon-emoji {
  font-size: 120rpx;
}

.error-info {
  margin-bottom: $elderly-spacing-lg;
}

.error-title {
  color: $theme-orange;
  margin-bottom: $elderly-spacing-sm;
  font-weight: 700;
}

.error-message {
  color: $elderly-text-primary;
  margin-bottom: $elderly-spacing-sm;
  line-height: 1.6;
}

.error-suggestion {
  color: $elderly-text-secondary;
  font-size: $elderly-font-sm;
  line-height: 1.5;
}

.error-actions {
  display: flex;
  gap: $elderly-spacing-sm;
}

.retry-btn {
  flex: 1;
  min-height: $elderly-touch-lg;
  background: linear-gradient(135deg, $theme-orange, $theme-yellow);
  color: #fff;
  border: none;
  border-radius: $elderly-radius-base;
  font-size: $elderly-font-base;
  font-weight: 600;
}

.retry-btn:active {
  transform: scale(0.98);
}

.help-btn {
  flex: 1;
  min-height: $elderly-touch-lg;
  background: $elderly-bg-secondary;
  color: $elderly-text-primary;
  border: 2rpx solid $elderly-border;
  border-radius: $elderly-radius-base;
  font-size: $elderly-font-base;
  font-weight: 600;
}

.help-btn:active {
  background: $elderly-bg-primary;
}

.btn-text {
  font-weight: 600;
}
</style>
